<template>
	<view class="template-page">
		<FileChoose ref="fileChooseRef" :showFileList="false" style="display:none"></FileChoose>
		<view class="content">
			<view v-if="!pdfDownload" class="flex_1 m-r-20 b-r p-r-20 p-t-10 form-wrapper left-page" style="padding:20rpx 20rpx;">
				<button size='mini' class='add-btn' type='primary' @click='addFormPopup("listing")'> + 新增提取物</button>
				<uni-table border stripe emptyText="暂无更多数据" :isHorizontalScroll="true">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="left">名称</uni-th>
						<uni-th align="left">编号</uni-th>
						<uni-th align="left">提取部位</uni-th>
						<uni-th align="left">规格</uni-th>
						<uni-th align="left">数量</uni-th>
						<uni-th align="left">特征</uni-th>
						<uni-th align="left">上传文件</uni-th>
						<uni-th align="left" width="200">操作</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in extractListingList" :key="index">
						<uni-td>{{item.name || ''}}</uni-td>
						<uni-td>{{item.number || ''}}</uni-td>
						<uni-td>{{item.part || ''}}</uni-td>
						<uni-td>{{currentSpecification(item.specification)}}</uni-td>
						<uni-td>{{item.acount || ''}}</uni-td>
						<uni-td>{{item.feature || ''}}</uni-td>
						<uni-td>
							<view v-if="item.fileUrlList && item.fileUrlList.length" style="width: 100%;display: flex;justify-content: space-around;align-items: center;">
								<view v-for="(file, index) in item.fileUrlList" :key="index">
									<!-- <i :class="isPdf(file) ? 'el-icon-document' : 'el-icon-picture'" style="font-size: 20px;"></i> -->
									<!-- <uni-icons type="image" size="30" @click="previewImage(file)"></uni-icons> -->
									<image :src="file.url" style="width:50px;height:50px;"></image>
								</view>
							</view>
						</uni-td>
						<uni-td>
							<div class="table-btns">
								<button class="edit-btn" type="primary" size="mini" @click="tableItemEdit(item, 'listing')">编辑</button>
								<button type="warn" size="mini" @click="tableItemDelete(item, 'listing')">删除</button>
							</div>
						</uni-td>
					</uni-tr>
				</uni-table>
				<uni-popup ref="listingPopupRef" :mask-click="false">
					<view class="add-form-popup" v-if="listingForm">
						<view style='font-weight: bold;margin-bottom: 10px;font-size: 18px;'>{{ addFormPopupTitle }}</view>
						<view style="height: 580rpx;">
							<scroll-view scroll-y="true" style="height:100%;transition: 0.5s;" scroll-with-animation>
								<uni-forms style='width: 100%;' :modelValue="listingForm" label-align="right">
									<view class="item-line">
										<uni-forms-item label="名称" name="name" label-width='140rpx'>
											<uni-easyinput type="text" v-model="listingForm.name" placeholder="请输入名称" />
										</uni-forms-item>
									</view>
									<view class="item-line">
										<uni-forms-item label="编号" name="number" label-width='140rpx'>
											<uni-number-box class="no-box-input" v-model="listingForm.number" placeholder="请输入编号" />
										</uni-forms-item>
									</view>
									<view class="item-line">
										<uni-forms-item label="提取部位" name="part" label-width='140rpx'>
											<uni-easyinput type="text" v-model="listingForm.part" placeholder="请输入提取部位" />
										</uni-forms-item>
									</view>
									<view class="item-line">
										<uni-forms-item label="规格" name="specification" label-width='140rpx'>
											<uni-data-select v-model="listingForm.specification" :localdata="SpecificationsList" @change="(e) => specificationChange(e, 'listing')" placeholder="请选择规格"></uni-data-select>
										</uni-forms-item>
									</view>
									<view class="item-line">
										<uni-forms-item label="数量" name="acount" label-width='140rpx'>
											<uni-number-box class="no-box-input" v-model="listingForm.acount" placeholder="请输入数量" />
										</uni-forms-item>
									</view>
									<view class="item-line">
										<uni-forms-item label="特征" name="feature" label-width='140rpx'>
											<uni-easyinput type="text" v-model="listingForm.feature" placeholder="请输入特征" />
										</uni-forms-item>
									</view>
									<view class="item-line">
										<uni-forms-item label="上传文件" name="fileUrlList" label-width='140rpx'>
											<FileChoose :value="listingForm.fileUrlList" :config="fileChooseConfig" @on-upload="handleOnUpload($event, 'listing')" @on-remove="(fileList, index) => handleOnRemove(fileList, index, 'listing')">
											</FileChoose>
										</uni-forms-item>
									</view>
								</uni-forms>
							</scroll-view>
						</view>
						<view class='buttons'>
							<button :disabled='formSaveBtnDisabled' @click='addFormPopupSave("listing")' class='btn' type='primary' size="mini">保存</button>
							<button @click='addFormPopupCancel("listing")' class='btn' size="mini">取消</button>
						</view>
					</view>
				</uni-popup>

				<button size='mini' class='add-btn' type='primary' @click='addFormPopup("collecter")'> + 新增提取人</button>
				<uni-table border stripe emptyText="暂无更多数据" :isHorizontalScroll="true">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="left">姓名</uni-th>
						<uni-th align="left">工作单位</uni-th>
						<uni-th align="left">电子签名</uni-th>
						<uni-th align="left" width="200">操作</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in extractCollecterList" :key="index">
						<uni-td>{{item.name}}</uni-td>
						<uni-td>{{item.org}}</uni-td>
						<uni-td>
							<image class="table-img" :src="item.signature"></image>
						</uni-td>
						<uni-td>
							<div class="table-btns">
								<button class="edit-btn" type="primary" size="mini" @click="tableItemEdit(item, 'collecter')">编辑</button>
								<button type="warn" size="mini" @click="tableItemDelete(item, 'collecter')">删除</button>
							</div>
						</uni-td>
					</uni-tr>
				</uni-table>
				<uni-popup ref="collecterPopupRef" :mask-click="false">
					<view class="add-form-popup" v-if="collecterForm">
						<view style='font-weight: bold;margin-bottom: 10px;font-size: 18px;'>{{ addFormPopupTitle }}</view>
						<view class="item-line" v-if='!vuex_config.isConnected'>
							<view class="label">身份识别：</view>
							<view class="form-input-item">
								<button class="upload-id-card-img" @click="uploadIdCardImg('collecter')">上传身份证图片</button>
							</view>
						</view>
						<view class="item-line">
							<view class="label">姓名：</view>
							<view class="form-input-item">
								<uni-easyinput type="text" v-model="collecterForm.name" placeholder="请输入姓名" />
							</view>
						</view>
						<view class="item-line">
							<view class="label">工作单位：</view>
							<view class="form-input-item">
								<uni-easyinput type="text" v-model="collecterForm.org" placeholder="请输入工作单位" />
							</view>
						</view>
						<view class="item-line sign-wrapper">
							<view class="label">电子签名：</view>
							<view class="form-input-item">
								<image class="sign-img" v-show="collecterForm.signature" :src="collecterForm.signature" />
								<text style="color: #1e9fff" @click="startSign('collecter', 'signature')">签名</text>
							</view>
						</view>
						<view class='buttons'>
							<button :disabled='formSaveBtnDisabled' @click='addFormPopupSave("collecter")' class='btn' type='primary' size="mini">保存</button>
							<button @click='addFormPopupCancel("collecter")' class='btn' size="mini">取消</button>
						</view>
					</view>
				</uni-popup>

				<button size='mini' class='add-btn' type='primary' @click='addFormPopup("witness")'> + 新增证人和当事人</button>
				<uni-table border stripe emptyText="暂无更多数据" :isHorizontalScroll="true">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="left">姓名</uni-th>
						<uni-th align="left">身份证号码</uni-th>
						<uni-th align="left">单位或住址</uni-th>
						<uni-th align="left">联系电话</uni-th>
						<uni-th align="left">电子签名</uni-th>
						<uni-th align="left" width="160">操作</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in extractWitnessList" :key="index">
						<uni-td>{{item.name}}</uni-td>
						<uni-td>{{item.cardNum}}</uni-td>
						<uni-td>{{item.org}}</uni-td>
						<uni-td>{{item.phone}}</uni-td>
						<uni-td>
							<image class="table-img" :src="item.signature"></image>
						</uni-td>
						<uni-td>
							<div class="table-btns">
								<button class="edit-btn" type="primary" size="mini" @click="tableItemEdit(item, 'witness')">编辑</button>
								<button type="warn" size="mini" @click="tableItemDelete(item, 'witness')">删除</button>
							</div>
						</uni-td>
					</uni-tr>
				</uni-table>
				<uni-popup ref="witnessPopupRef" :mask-click="false">
					<view class="add-form-popup" v-if="witnessForm">
						<view style='font-weight: bold;margin-bottom: 10px;font-size: 18px;'>{{ addFormPopupTitle }}</view>
						<view class="item-line" v-if='!vuex_config.isConnected'>
							<view class="label">身份识别：</view>
							<view class="form-input-item">
								<button class="upload-id-card-img" @click="uploadIdCardImg('witness')">上传身份证图片</button>
							</view>
						</view>
						<view class="item-line">
							<view class="label">姓名：</view>
							<view class="form-input-item">
								<uni-easyinput type="text" v-model="witnessForm.name" placeholder="请输入姓名" />
							</view>
						</view>
						<view class="item-line">
							<view class="label">身份证号码：</view>
							<view class="form-input-item">
								<uni-easyinput type="text" v-model="witnessForm.cardNum" placeholder="请输入身份证号码" />
							</view>
						</view>
						<view class="item-line">
							<view class="label">单位或住址：</view>
							<view class="form-input-item">
								<uni-easyinput type="text" v-model="witnessForm.org" placeholder="请输入单位或住址" />
							</view>
						</view>
						<view class="item-line">
							<view class="label">联系电话：</view>
							<view class="form-input-item">
								<uni-easyinput type="number" v-model="witnessForm.phone" placeholder="请输入联系电话" />
							</view>
						</view>
						<view class="item-line sign-wrapper">
							<view class="label">电子签名：</view>
							<view class="form-input-item">
								<image class="sign-img" v-show="witnessForm.signature" :src="witnessForm.signature" />
								<text style="color: #1e9fff" @click="startSign('witness', 'signature')">签名</text>
							</view>
						</view>
						<view class='buttons'>
							<button :disabled='formSaveBtnDisabled' @click='addFormPopupSave("witness")' class='btn' type='primary' size="mini">保存</button>
							<button @click='addFormPopupCancel("witness")' class='btn' size="mini">取消</button>
						</view>
					</view>
				</uni-popup>

			</view>
			<InventoryTem class="flex_1 template" :formData="formData" :pdfDownload="pdfDownload" />
		</view>
		<FooterBtn class="footer-btn" :pdfDownload="pdfDownload" @submit="submitForm" @cancel="handleCancel" />
		<DownloadBtn class="download-btn" :pdfDownload="pdfDownload" title="火灾痕迹物品提取清单" :formData="formData" :moduleName="currentModule.moduleName" @saveData="submitFormBackBefore" />
	</view>
</template>

<script>
	import DataFlow from '@/pagesH5/mixins/DataFlow.js'
	import FileChoose from '../../uni_modules/file-choose/components/file-choose/file-choose.vue'
	import eventBus from '@/common/eventBus'
	import DownloadBtn from '@/pagesH5/components/DownloadBtn'
	import FooterBtn from '@/pagesH5/components/FooterBtn'
	// import UniDataSelect from '../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue'
	import config from '@/common/config'
	import InventoryTem from '@/pagesH5/components/inquiryTemplate/inventoryTem.vue'
	import {
		SPECIFICATIONS_LIST
	} from '@/const/archives/inventory.js'
	export default {
		mixins: [DataFlow],
		components: {
			FileChoose,
			InventoryTem,
			DownloadBtn,
			FooterBtn
		},
		data() {
			return {
				signatureVisible: false,
				token: "",
				formSaveBtnDisabled: false,
				currentKey: "",
				isDownload: false,
				fileChooseConfig: {
					size: 20,
					limit: 99,
					title: "",
					headers: this.headers,
					automatic: false,
					fileMediatype: 'file',
					mediaTypeFileType: 'png,jpg,jpeg,pdf'
				},
				timeout_file: null,
				currentEditFormObj: {}, // 当前编辑表单对象
				addFormPopupTitle: '添加', // popup 标题
				specificationNameRange: [],
				refKey: "",
				pdfDownload: false,
				isEdit: false,
				pdfVisible: false,
				pdfUrl: '',
				listingForm: {},
				collecterForm: {},
				witnessForm: {},
				listingOptionSpecificationTextFilter: {},
				listingOption: [{
						type: 'selection',
						fixed: false,
						width: 50
					},
					{
						name: 'name',
						label: '名称',
						fixed: false,
						width: 80,
						emptyString: '--'
					},
					{
						name: 'number',
						label: '编号'
					},
					{
						name: 'part',
						label: '提取部位'
					},
					{
						name: 'specification',
						label: '规格',
						filters: {
							"1": "台",
							"2": "张",
							"3": "把",
							"4": "桶",
							"5": "片"
						}
					},
					{
						name: 'acount',
						label: '数量'
					},
					{
						name: 'feature',
						label: '特征'
					},
					{
						name: 'fileUrlList',
						label: '上传文件',
						type: 'img',
						width: 120
					},
					{
						name: 'operation',
						type: 'operation',
						label: '操作',
						renders: [{
								name: '编辑',
								func: 'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
							},
							{
								name: '删除',
								type: 'warn',
								func: "delete"
							}
						]
					}
				],
				collecterOption: [{
						type: 'selection',
						fixed: false,
						width: 50
					},
					// { name:'cardImg', label: '身份识别', type: "img" },
					{
						name: 'name',
						label: '姓名'
					},
					{
						name: 'org',
						label: '工作单位'
					},
					{
						name: 'signature',
						label: '电子签名',
						type: 'img',
						width: 80
					},
					{
						name: 'operation',
						type: 'operation',
						label: '操作',
						renders: [{
								name: '编辑',
								func: 'edit'
							},
							{
								name: '删除',
								type: 'warn',
								func: "delete"
							}
						]
					}
				],
				witnessOption: [{
						type: 'selection',
						fixed: false,
						width: 50
					},
					// { name:'cardImg', label: '身份识别', type: "hide" },
					{
						name: 'name',
						label: '姓名'
					},
					{
						name: 'cardNum',
						label: '身份证号码'
					},
					{
						name: 'org',
						label: '单位或住址'
					},
					{
						name: 'phone',
						label: '联系电话'
					},
					{
						name: 'signature',
						label: '电子签名',
						type: 'img',
						width: 80
					},
					{
						name: 'operation',
						type: 'operation',
						label: '操作',
						renders: [{
								name: '编辑',
								func: 'edit'
							},
							{
								name: '删除',
								type: 'warn',
								func: "delete"
							}
						]
					}
				],
			};
		},
		computed: {
			SpecificationsList() {
				return SPECIFICATIONS_LIST.map(item => {
					return {
						text: item.label,
						value: item.value
					}
				})
			},

			getMainFileType() {
				return (file) => {
					if (file.type == 'application/pdf' || file.type == 'pdf') return 'pdf'
					if (file.type && file.type.indexOf('/') != '-1') return file.type.split('/')[0]

					const fileTypeMapping = {
						// image: 'image',
						jpg: 'image',
						jpeg: 'image',
						png: 'image',
						gif: 'image',
						mp4: 'video',
						mov: 'video',
						avi: 'video',
						wmv: 'video',
					}
					if (fileTypeMapping[file.type] != undefined) return fileTypeMapping[file.type]
					if ((file.url && file.url.indexOf('.') != '-1')) {
						const extension = file.url.split('.').pop().toLowerCase()

						const fileType = fileTypeMapping[extension] || '未知类型'
						return fileType
					}
					if (!file.type) return '未知类型'
					return file.type
				}
			},
			cardUploadUrl() {
				return config.baseUrl + config.adminPath + "/archives/notice/discern";
			},
			extractListingList() {
				return this.formData?.extractListingList || []
			},
			extractCollecterList() {
				return this.formData?.extractCollecterList || []
			},
			extractWitnessList() {
				return this.formData?.extractWitnessList || []
			},
			currentSpecification() {
				return (specification) => {
					const current = this.SpecificationsList.find(item => item.value == specification)
					return current?.text || ''
				}
			}
		},
		onShow() {
			eventBus.$on('get-sign-event', (base64, key, signKey) => {
				const keyForm = key + 'Form'
				this.$nextTick(() => {
					this.$set(this[keyForm], signKey, base64)
				})
			})
		},
		methods: {
			isPdf(url) {
				if (!url) return ''
				return ['pdf'].includes(url.substring(url.lastIndexOf('.') + 1))
			},
			previewImage(file) {
				const fileChooseRef = this.$refs.fileChooseRef
				const {
					type,
					url
				} = file
				let fileType = this.getMainFileType(file)
				switch (fileType) {
					case 'image':
						fileChooseRef.previewImage(url)
						break;
					case 'video':
						fileChooseRef.previewVideo(url)
						break;
					case 'pdf' || 'application/pdf':
						fileChooseRef.previewPDF(url)
						break;
				}
			},
			specificationChange(e, key) {
				const keyForm = key + 'Form'
				this[keyForm].specification = e
			},
			// 表格行编辑
			tableItemEdit(row, key) {
				console.log(row);
				this.addFormPopupTitle = '编辑'
				const keyRef = key + 'PopupRef'
				const capitalize = key.charAt(0).toUpperCase() + key.slice(1)
				const keyForm = key + 'Form'
				this.currentEditFormObj = row
				this[keyForm] = this.$u.deepClone(row)
				this.$refs[keyRef].open()
				this.formSaveBtnDisabled = false
			},
			// 表格行删除
			tableItemDelete(row, key) {
				const capitalize = key.charAt(0).toUpperCase() + key.slice(1)
				const keyList = 'extract' + capitalize + 'List'
				const formData = this.formData;
				const formList = formData[keyList];
				let index = formList.findIndex(item => item.key == row.key)
				if (index != -1) {
					formList.splice(index, 1)
				}
				this.formData[keyList] = formList
			},
			// 表格添加表单popup
			addFormPopup(key) {
				const refKey = key + 'PopupRef'
				this.addFormPopupTitle = '添加'
				this.$refs[refKey].open()
				this.formSaveBtnDisabled = false
			},
			inputChange(val, obj) {
				this[obj] = val
			},
			// 表格添加表单保存
			addFormPopupSave(key) {
				this.formSaveBtnDisabled = true
				const keyRef = key + 'PopupRef'
				const capitalize = key.charAt(0).toUpperCase() + key.slice(1)
				const keyList = 'extract' + capitalize + 'List'
				const keyForm = key + 'Form'

				const formData = this.formData;
				const formList = formData[keyList];
				const form = this.$u.deepClone(this[keyForm])
				if (!Object.keys(form).length) {
					this.formSaveBtnDisabled = false;
					return this.$u.toast('请至少保证一项有值')
				}
				if (!formList) formData[keyList] = []
				let timeKey = new Date().getTime()
				if (this.addFormPopupTitle === '添加') {
					formList.push({
						...form,
						key: timeKey
					})
				} else if (this.addFormPopupTitle === '编辑') {
					let index = formList.findIndex(item => item.key === this.currentEditFormObj.key)
					formList[index] = form
					console.log(form);
					this.$set(this.formData, keyList, formList)
				}

				this.$refs[keyRef].close()
				this[keyForm] = {}
			},
			// 表格添加表单取消
			addFormPopupCancel(key) {
				const keyRef = key + 'PopupRef'
				const keyForm = key + 'Form'
				this.$refs[keyRef].close()
				this[keyForm] = {}
			},
			handleOnUpload(file, key) {
				console.log(file);
				const keyForm = key + 'Form'
				console.log(keyForm, this[keyForm]);
				if (!this[keyForm].fileUrlList) {
					this[keyForm].fileUrlList = []
				}
				this[keyForm].fileUrlList.push(file)
			},
			handleOnRemove(fileList, index, key) {
				let newFileList = fileList
				const keyForm = key + 'Form'
				this[keyForm].fileUrlList = [...newFileList]
			},
			uploadIdCardImg(key) {
				let _this = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: res => {
						const keyForm = key + 'Form'
						const tempFilePaths = res.tempFilePaths[0];
						this.$set(this[keyForm], "cardImg", res.tempFilePaths.join(','));
						// 图片上传
						const uploadTask = uni.uploadFile({
							url: _this.cardUploadUrl,
							filePath: tempFilePaths,
							name: 'file',
							header: this.headers,
							success: function(res) {
								_this.handleOnSuccess(JSON.parse(res.data), key)
							},
							fail: function(uploadFileFail) {
								console.error('Error:', uploadFileFail);
							},
							complete: () => {}
						});
					},
					error: function(e) {
						console.error(e);
					}
				});
			},
			handleOnSuccess(res, key) {
				if (!res.data.words_result_num) {
					uni.showToast({
						title: '无法识别，请上传清晰的证件照片',
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: '识别成功',
						icon: 'none'
					});
					const {
						姓名: {
							words: name
						},
						公民身份号码: {
							words: cardNum
						},
						住址: {
							words: org
						}
					} = res.data.words_result;

					const keyForm = key + 'Form'
					if (key === 'witness') {
						this.$set(this, keyForm, {
							name,
							cardNum,
							org
						})
					} else if (key === 'collecter') {
						this.$set(this, keyForm, {
							name,
							org
						})
					}
				}
			},
			async startSign(obj, val) {
				uni.navigateTo({
					url: val ? '../components/signComponent?obj=' + obj + '&sign=' + val : '../components/signComponent'
				})
			},
			generate() {
				this.$refs[this.refKey].tableForm.signature = this.$refs.sign.submit(80, 32);
				uni.navigateTo({
					url: '../components/signComponent'
				})
			},
			initForm() {
				let initForm = {
					remark: "",
					time: 2,
					address: "",
					extractListingList: [],
					extractCollecterList: [],
					extractWitnessList: []
				};
				return initForm
			},
			async submitFormBefore() {
				this.formData.title = `${this.$u.timeFormat(new Date(), 'yyyymmddhhMM')}`
			},
		}
	};
</script>

<style lang="scss">
	.table-img {
		width: 100rpx;
		height: 100rpx;
	}

	.add-btn {
		margin-top: 20rpx;
	}

	.table-btns {
		.edit-btn {
			margin-right: 20rpx;
		}
	}

	.add-form-popup {
		width: 40vw;
		padding: 30rpx;
		overflow-y: scroll;
		max-height: 80vh;
		background-color: #fff;

		.item-line {
			display: flex;
			align-items: center;
			margin: 8px 0;

			&.half {
				width: 50%;
			}

			.uni-forms-item {
				width: 100%;
			}

			&.textarea {
				align-items: flex-start;
			}

			&.sign-wrapper {
				display: flex;
				align-items: center;

				.sign-img {
					width: 100px;
					height: 35px;
				}

				.form-input-item {
					display: flex;
					align-items: center;
				}
			}

			.label {
				flex-shrink: 0;
				min-width: 80px;
				color: #606266;
				text-align: right;
				font-size: 14px;
			}

			.form-input-item {
				width: 100%;

				&.btn-2 {
					display: flex;
					margin-top: 10px;
				}

				.textarea {
					width: 100%;
					border: 1px solid #DCDFE6;
					border-radius: 4px;
					padding: 15px;
					box-sizing: border-box;
				}

				.upload-record-audio,
				.record-all-screen,
				.record-all-audio {
					background-color: #3196fA;
					color: #fff;
					font-size: 12px;
					border-radius: 3px;
					height: 32px;
				}

				.upload-record-audio {
					padding: 9px 15px;
					margin-bottom: 10px;
				}

				.record-all-audio {
					margin-left: 8px;
				}

				.map-input {
					display: flex;
					align-items: center;
					padding-left: 10px;
					height: 42px;
					color: #999;
					font-size: 12px;
					border-radius: 4px;
					border: 1px solid #dcdfe6;

					&.has-value {
						color: #606266;
					}
				}

				.upload-id-card-img {
					display: inline-block;
					padding: 0 15px;
					height: 32px;
					line-height: 32px;
					color: #67C23A;
					background: #f0f9eb;
					border-color: #c2e7b0;
					margin-left: 8px;
					font-size: 14px;
				}
			}
		}

		.buttons {
			display: flex;
			justify-content: flex-end;
			margin-top: 30rpx;

			.btn {
				margin: 0 0 0 10px;
			}
		}
	}
</style>